<script setup lang="ts">

    const router = useRouter()

    nextTick(() => {
      router.currentRoute.value.meta.NavBar = false
    })

    console.log('setup ...')

    const text = ref('')

    //console.log(router.currentRoute.value.params.title)

    function iconMore() {
      console.log('icon-more')
    }

    const show = ref(false)

    function showPopup() {
      show.value = true
    }
</script>

<template>
  <section class="page-container">
    <div class="chat">
      <div class="chatItem you">
        <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/112/112.jpg" />
        <p class="message">大功告成！小小故障，难不倒本匠！</p>
      </div>

      <div class="chatItem me">
        <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/533/533.jpg" />
        <p class="message">在山里打架，要过我们山民的法则!</p>
      </div>

      <div class="chatItem you">
        <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/112/112.jpg" />
        <p class="message">白菜白，辣椒红，我是庄园的修理工~</p>
      </div>

      <div class="chatItem me">
        <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/533/533.jpg" />
        <p class="message">此树是我栽!小的们，一起上!</p>
      </div>

      <div class="chatItem me">
        <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/533/533.jpg" />
        <p class="message">球球!冲冲冲!哪有好吃的，我们就去哪!？</p>
      </div>

      <div class="chatItem you">
        <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/112/112.jpg" />
        <p class="message">尝过漂泊的滋味，就会更懂安定的珍贵</p>
      </div>

      <div class="chatItem you">
        <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/112/112.jpg" />
        <p class="message">你有见过一只绿油油，圆滚滚，长在土里的小狗吗？</p>
      </div>

      <div class="chatItem me">
        <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/533/533.jpg" />
        <p class="message">猫崽子们，一起上!</p>
      </div>
    </div>

    <van-action-bar>
      <van-action-bar-icon @click="iconMore">
        <template #icon>
          <van-icon name="more-o" size="24" />
        </template>
      </van-action-bar-icon>

      <van-field v-model="text" class="chat-input-text" />

      <van-action-bar-icon>
        <template #icon>
          <van-icon name="smile-o" size="24" />
        </template>
      </van-action-bar-icon>

      <van-action-bar-icon>
        <template #icon>
          <van-icon name="add-o" size="24" @click="showPopup" />
          <van-popup v-model:show="show" :overlay="false" position="bottom" :style="{ height: '30%' }" />
        </template>
      </van-action-bar-icon>
    </van-action-bar>
  </section>
</template>

<style lang="scss" scoped>
$icon-width: 40;

.chat {
  padding: 16px;
  width: calc(100% - 32px);
  height: calc(100% - 50px);
  .chatItem {
    display: flex;
    position: relative;
    img {
      display: block;
      position: absolute;
      top: 16px;
      width: 40px;
      height: 40px;
      border-radius: 8px;
    }
    p {
      padding: 10px;
      border-radius: 8px;
      font-size: 16px;
      max-width: calc(100% - 132px);
      word-wrap: break-word;
    }
    &::before,
    &::after {
      content: '';
      width: 0;
      height: 0;
      position: absolute;
      top: 26px;
      border: solid 8px transparent;
    }
  }
  .you {
    justify-content: flex-start;
    &::before {
      border-right-color: var(--van-white);
      left: 40px;
    }

    p {
      margin-left: 55px;
      background-color: var(--van-white);
    }
  }
  .me {
    justify-content: flex-end;
    &::after {
      border-left-color: #94ec68;
      right: 40px;
    }
    p {
      margin-right: 55px;
      background-color: #94ec68;
    }
  }
}

.chat-input-text {
  width: calc(100% - #{$icon-width * 3}px);
  height: 42px;
  margin: 4px;
  border: none;
  background-color: var(--van-background);
  color: var(--van-text-color);
  border-radius: 6px;
}

.van-action-bar-icon {
  min-width: #{$icon-width}px;
}
// 深色模式
.van-theme-dark {
  p {
    color: var(--van-black);
  }
  .you {
    &::before {
      border-right-color: var(--van-background-3);
    }
    p {
      color: var(--van-gray-3);
      background-color: var(--van-background-3);
    }
  }
}

.van-action-bar {
  bottom:0%;
}
</style>
